import React, {
  PropTypes,
} from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome'

const styles = StyleSheet.create({
  view: {
    alignItems: 'center',
  },
  text: {
    fontSize: 10,
    marginTop: 3,
  },
});

export default class extends React.Component {
  static propTypes = {
    iconName: PropTypes.string.isRequired,
    tabTitle: PropTypes.string.isRequired,
    selected: PropTypes.bool,
  };

  render() {
    const {
      iconName,
      selected,
      tabTitle,
    } = this.props;

    const fontColor = selected ? 'blue' : 'gray';
    return (
      <View style={styles.view}>
        <Icon
          size={14}
          name={iconName}
          color={fontColor}
        />
        <Text
          style={[styles.text, { color: fontColor }]}
        >
          {tabTitle}
        </Text>
      </View>
    );
  }
}
